<template>
  <div class="myImage">
    <h1 v-if="imageStore.images.length == 0">您还未曾上传任何图片</h1>
    <n-image-group>
      <ImageEl 
        v-for="image in displayImages"
        :image="image"
        :key="image.id"
      />
    </n-image-group>
    <div class="more" v-if="allImages.length > imageNumber">
      <span @click="displayMore">剩余{{ allImages.length - imageNumber }}张图片未展示，点击加载更多</span>
    </div>
    <div style="display: none;">
      <a-image
        :width="200"
        :preview="{
          visible: previewShow,
          onVisibleChange: setPreviewShow,
        }"
        :src=urlList[initialIndex]
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onActivated, ref } from 'vue';
import ImageEl from '../../components/YunImage/ImageEl.vue';
import { useImageList, useImagePreview } from '../../hook/imagePreview';
import { useImageStore } from '../../store/image';
const imageStore = useImageStore()
const {displayImages, displayMore, imageNumber, allImages} = useImageList(50, 30, 'all')
const {urlList, initialIndex, setPreviewShow, previewShow} = useImagePreview(displayImages)
onActivated(() => {
  imageStore.debounceResizeImage()
})
</script>

<style scoped>

</style>